<template>
    <div class="bigbox">
        <div class="box01" v-for="(el,index) in arr1" :key="index">
            <router-link :to="{ path: '/single',query: {wid: el.wid} }" class="tosingle">
            <div class="smallbox"  :style="{ backgroundImage: `url(${el.video})` }"></div>
            <!-- <img src="https://image.gogoup.com//course/20230921/1695288902011.jpg?x-oss-process=image/format,webp"> -->
            <p>{{el.title}}</p>
            <p>{{el.zhuti}}</p>
            <p class="dianzan">点赞{{el.dianzan}}</p>
            <div class="smallbox01" >
                <img class="touxiang"
                    :src="el.avatar">
                <span class="auther">{{el.auther}}</span>
            </div>
            </router-link>
        </div>
    </div>
</template>

<script setup>
import { ref,onMounted,getCurrentInstance } from "vue"
	let {proxy}=getCurrentInstance()
	let arr1=ref([])
    // let arr2=ref([])
    let load01=async()=>{
        let res1=await proxy.$axios("/egg/huihua")
        console.log(res1)
        console.log(res1.data.info)
		arr1.value=arr1.value.concat(res1.data.info)
        console.log(arr1.value[1].uid);
    }
    onMounted(()=>{
		load01()
	})

</script>
<script>

</script>
<style scoped>
.bigbox  {
        margin: 0px 124px;
        padding-top: 30px;
        display: flex;
        justify-content: center;
        width: 1200px;
        flex-wrap: wrap
	}
p {
    margin-left: 20px;
}
.box01 {
    margin-right: 24px;
    margin-bottom: 24px;
    width: 282px;
    height: 337px;
    background-color: white;
}
img {
    width: 100px;
    height: 100px;
}

.smallbox {
    background-size: 100% 100%;
    width: 282px;
    height: 158px;
}

.smallbox01 {
    border-top: 1px solid rgb(233, 231, 231);
    display: flex;
    justify-content: start;
    align-items: center;
    margin:0px 20px;
}

.touxiang {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
}

.auther {
    font-size: 14px;
}

.title {
    margin-left: 20px;

}
.bigbox {
    background-color: #f5f6f6;
}
p {
    font-size: 14px;
}
.dianzan {
    font-size: 12px;
    color: #a1a3a3;
}
p,
span {
        color:black;
}
.tosingle {
    text-decoration:none;

}
</style>